<template>
  <div>
    用户名: <input v-model="username" type="text">
    <!-- 需求: 不使用 v-model 这个指令, 实现和 v-model 一样的效果 -->
    <!-- password = $event.target.value 将事件源的 value 赋值给 password 变量 -->
    <!-- 
      结论:
        v-model 完全等同于使用 :value 设置 value, 使用@input 绑定事件, 并在事件触发后将事件源的 value 赋值给变量

        所以, 我们说 v-model 是一个语法糖

        面试题: v-model 是什么?
     -->
    密码: 
    <input 
      @input="password = $event.target.value" 
      :value="password" 
      type="text">
  </div>
</template>

<script>
export default {

  data() {
    return {
      username: '阿田',
      password: '123456'
    }
  }
}
</script>

<style>

</style>
